<template>
  <!-- 个人中心 -->
  <view>
    <!-- 背景在此处替换 -->
    <view
      :style="{
        background: `url(${navData.imgs}) no-repeat`,
        backgroundSize: '100% 100%',
        width: '750rpx',
        height: '550rpx',
        position: 'relative',
      }"
    >
      <c-navBar title="个人中心" isTran isPerch isBack></c-navBar>
      <view class="user-box">
        <view class="df aic">
			<view style="width: 160rpx;margin-right: 32rpx;position: relative;">
				<image
				  class="us-img"
				  :src="info.avatar ? info.avatar : '/static/mine/defaultAvatar.png'"
				  mode=""
				>
				</image>
				<!-- <view style="position:absolute;top:130rpx;font-size:12px;color:white;font-style:italic;">
					<image src="/static/tabbar/level-back.png" style="width:170rpx;height:66rpx;"/>
					<view style="position:absolute; left:60rpx; top:8rpx;"><span style="font-size:20px;">v1</span>等级</view>
				</view> -->
			</view>
          
		  
          <view class="">
            <view class="us-name">{{ info.name || "游客" }}</view>
            <view class="us-identity"
              >账号: {{ info.phone || "未登录" }}</view
            >
            <!-- <view class="us-identity">所属机构: {{info.institutionName}}</view> -->
          </view>
        </view>
        <view class="edit_data" @click="goInfo"> 编辑资料 </view>
      </view>
      <!-- <u-toast ref="uToast" /> -->

      <view style="bottom: -150rpx; left: 20rpx" class="myorder pa">
        <view class="myorder_title">
          <view class="title_l"> 我的订单 </view>
          <view
            class="title_r"
            @click="jumpPage('/pages/order/pages/myOrder?type=-1')"
          >
            全部订单
            <!-- <image
              class="imgs"
              src="@/static/common/go.png"
              mode="widthFix"
            ></image> -->
          </view>
        </view>
        <view class="myorder_con">
          <view
            class="myorder_item"
            v-for="item in myOrderList"
            :key="item.id"
            @click="jumpPage(item.url)"
          >
            <view class="co-one mt20">
              <view class="cart pr">
                <view v-if="item.orderNum != 0" class="ca-num bs tac">{{
                  item.orderNum
                }}</view>
                <image :src="item.img" mode="widthFix"></image>
              </view>
            </view>
            <view style="font-size: 20rpx;" class="mt10">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>

    <view style="margin-top: 200rpx" class="main">
      <view class="myserve">
        <view class="myserve_title">
          <view class="title_l"> 我的服务 </view>
          <view class="title_r"> </view>
        </view>

        <view class="myserve_con">
          <view
            class="myserve_item"
            v-for="item in myServeList1"
            :key="item.id"
            @click="jumpServe(item)"
          >
            <image :src="item.img ? item.img : ''" mode="widthFix"></image>
            <view class="text">{{ item.text }}</view>
          </view>
        </view>
        <view class="myserve_con">
          <view
            class="myserve_item"
            v-for="item in myServeList2"
            :key="item.id"
            @click="jumpPage(item.url)"
          >
            <image :src="item.img ? item.img : ''" mode="widthFix"></image>
            <view class="text">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { init_backgroundList } from "@/api/node.js";
import { init_orderList } from "@/api/user.js";
export default {
  data() {
    return {
      navData: {},
      orderNum: null,
      exitShow: false,
      info: {
        avatar: "",
        name: "",
        phone: "",
      },
      type: "", //会员等级
      statisticsData: {},
      isConfirmShow: false,
      myOrderList: [
        {
          id: 1,
          text: "待付款",
          url: "/pages/order/pages/myOrder?type=0",
          img: require("@/static/mine/mineOrder2.png"),
        },
        {
          id: 2,
          text: "待发货",
          url: "/pages/order/pages/myOrder?type=1",
          img: require("@/static/mine/mineOrder3.png"),
        },
        {
          id: 3,
          text: "待收货",
          url: "/pages/order/pages/myOrder?type=2",
          img: require("@/static/mine/mineOrder4.png"),
        },
        {
          id: 4,
          text: "已完成",
          url: "/pages/order/pages/myOrder?type=3",
          img: require("@/static/mine/mineOrder5.png"),
        },
        {
          id: 5,
          text: "退款/售后",
          url: "/pages/order/pages/myOrder?type=4",
          img: require("@/static/mine/mineOrder6.png"),
        },
      ],
      myServeList1: [
        {
          id: 1,
          text: "我的团员",
          url: "/pages/my/pages/myMember",
          img: require("@/static/mine/serve12.png"),
        },
        {
          id: 2,
          text: "我的积分",
          url: "/pages/my/pages/myCane",
          img: require("@/static/mine/serve2.png"),
        },
        {
          id: 3,
          text: "领卷中心",
          url: "/pages/example/pages/coupon",
          img: require("@/static/mine/serve3.png"),
        },
        {
          id: 4,
          text: "我的收藏",
          url: "/pages/note/collect",
          img: require("@/static/mine/serve5.png"),
        },
      ],
      myServeList2: [
        {
          id: 5,
          text: "收货地址",
          url: "/pages/my/pages/address",
          img: require("@/static/mine/serve4.png"),
        },
        {
          id: 6,
          text: "客服中心",
          url: "/pages/my/pages/service",
          img: require("@/static/mine/serve6.png"),
        },
        {
          id: 7,
          text: "分享好友",
          url: "/pages/my/pages/inviteFriends",
          img: require("@/static/mine/serve7.png"),
        },
        {
          id: 8,
          text: "系统设置",
          url: "/pages/my/pages/settings",
          img: require("@/static/mine/serve8.png"),
        },
      ],
    };
  },
  onLoad() {
    // this.userInfo()
  },
  onShow() {
    // this.statistics()
    this.getImg();
    this.getOrderList();
    let lifeData = uni.getStorageSync("lifeData");
    if (lifeData) {
      this.getCartNum();
      this.getUserType();
      this.userInfo();
    }
  },
  methods: {
    async getImg() {
      const res = await init_backgroundList(2);
      this.navData = res;
    },
    async getOrderList() {
      const res = await init_orderList();
      let arr = [];
      arr.push(
        res?.toBePaidNum || 0,
        res?.toBeShippedNum || 0,
        res?.toBeReceivedNum || 0,
        res?.toBeEvaluationsNum || 0,
        res?.salesNum || 0
      );

      let myKey = "orderNum";
      for (let i = 0; i < this.myOrderList.length; i++) {
        this.myOrderList[i][myKey] = arr[i];
      }
    },
    // 获取购物车数据
    getCartNum() {
      this.$api.getCartNumY().then((res) => {
        // console.log(res, '获取购物车数据');
        if (res.data > 0) {
          uni.setTabBarBadge({
            index: 3,
            text: String(res.data),
          });
        } else {
          uni.removeTabBarBadge({
            index: 3,
          });
        }
      });
    },

    // 立即认养
    goBuy() {
      uni.navigateTo({
        url: "/pages/my/pages/ownerBuy",
      });
    },

    // 跳转到对应页面 订单
    jumpPage(url) {
      uni.navigateTo({
        url,
      });
    },
    jumpServe(v) {
      if (v.id == 1 && this.info.promoterStatus === 0) {
        uni.showToast({
          title: "不是VIP",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      uni.navigateTo({
        url: v.url,
      });
    },
    // 获取个人信息
    userInfo() {
      this.$api.userInfo().then((res) => {
        this.info = res.data;
        // uni.setStorageSync('userType', res.data.type);
      });
    },
    // 获取会员等级
    getUserType() {
      this.$api.getUserTypeY({}).then((res) => {
        // this.type = res.data;
        this.type = 1;
      });
    },
    //数据统计
    statistics() {
      getBusinessStatistics().then((res) => {
        this.statisticsData = res.data;
      });
    },
    // 编辑资料
    goInfo() {
      uni.navigateTo({
        url: "/pages/my/pages/information",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.identity {
  width: 100%;
  padding: 38rpx 32rpx 0rpx 42rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .identity_l {
    .text1 {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }

    .text2 {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 30rpx;
    }
  }

  .identity_r {
    width: 128rpx;
    height: 48rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #009e42;
    line-height: 48rpx;
    text-align: center;
  }
}

.user-box {
  padding: 65rpx 30rpx 10rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .edit_data {
    width: 128rpx;
    height: 48rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    border: 1rpx solid #fff;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 48rpx;
    text-align: center;
    transform: rotateZ(360deg);
  }

  .us-img {
    border: #fff 4rpx solid;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    object-fit: cover;
  }

  .us-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 47rpx;
  }

  .us-identity {
    font-size: 28rpx;
    font-weight: 400;
    color: #4d4d4d;
    line-height: 33rpx;
    margin-top: 24rpx;
  }
}
.myorder {
  margin: auto;
  width: 95%;
  background-color: #fff;
  // box-shadow: 10px  #888888;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
  border: 1rpx solid #e6e6e6;
  padding: 24rpx 20rpx 28rpx;
  box-sizing: border-box;

  .myorder_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title_l {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }

    .title_r {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
      display: flex;
      align-items: center;

      .imgs {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  .myorder_con {
    padding: 0rpx 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;

    .myorder_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 60rpx;
      }

      .text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-top: 10rpx;
      }
    }
  }
}
.main {
  width: 750rpx;
  padding: 0rpx 20rpx;
  box-sizing: border-box;

  .myserve {
    margin: 24rpx 0rpx 20rpx;
    width: 100%;
    // height: 228rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 1rpx solid #e6e6e6;
    padding: 24rpx 20rpx 28rpx;
    box-sizing: border-box;

    .myserve_title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title_l {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
      }

      .title_r {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;

        .imgs {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }

    .myserve_con {
      padding: 0rpx 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 34rpx;

      .myserve_item {
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 72rpx;
        }

        .text {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-top: 10rpx;
        }
      }
    }
  }
}
.co-one {
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  color: #333333;
  font-weight: 400;
  line-height: 30rpx;

  .cart {
    position: relative;

    .ca-num {
      width: 30rpx;
      height: 30rpx;
      background: #fc3e3e;
      border-radius: 50%;
      line-height: 30rpx !important;
      position: absolute;
      right: -10rpx;
      top: -18rpx;
      font-size: 20rpx;
      color: #fff;
      line-height: 20rpx;
      text-align: center;
    }
  }

  image {
    width: 60rpx;
    margin-bottom: 5rpx;
  }
}
</style>
